<template>
  <div class="page SupUser">
    <van-nav-bar title="添加特殊用户" left-arrow @click-left="goBack"/>
    <van-form class="page-content" :disabled="btnLoading" @submit="submit">
      <van-field v-model.number="info.specialPlaTime" required label="日免费时长" placeholder="小时"/>
      <form-picker v-if="$store.getters.ifAdmin" :rules="[ $check('', true) ]" required label="免费类别" v-model="info.freeCategory" :option="option.freeCategory"/>
      <van-field readonly clickable label="选择门店" :value="info.shopName" @click="seleshop = true" required placeholder="请选择" v-if="info.freeCategory == 0"/>
      <van-field readonly clickable label="查找会员" :value="info.nick" @click="seleuser = true" required placeholder="请选择"/>
        
      <div class="flex-col row-padding">
        <div class="font-warn" style="margin: 0.25rem 0; font-size: 12px;">
          <div>*提示:请注意！您添加的特殊用户为微信/支付宝二者中的某一类，添加完毕后，用户只有使用相对应的小程序租借时才会免费。如果想让用户微信/支付宝都免费，请查询用户微信/支付宝对应id全部新增。</div>
        </div>
      </div>

      <div style="margin: 1rem 16px 16px;">
        <van-button block type="info" :loading="btnLoading">提交</van-button>
      </div>
    </van-form>
    <sele-user v-model="seleuser" @submit="(sele) => info = { ...info, userId: sele.userId, nick: sele.nick }"></sele-user>
    <sele-shop v-model="seleshop" @submit="changeShop" ref="seleShop"></sele-shop>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {
        specialPlaTime: '',
        freeCategory: 0,
        shopName: '',
        nick: '',
        userId: 0,
        shopIdList: []
      },

      btnLoading: false,

      modify: false,

      option: {
        freeCategory: [
          { value: 0, label: '指定门店使用免费' },
          { value: 1, label: '所有门店使用免费' }
        ]
      },

      seleuser: false,
      seleshop: false
    };
  },
  methods: {
    goBack() {
      if (this.modify) {
        this.$emit('close');
      } else {
        this.$router.go(-1);
      }
    },
    setValue(info) {
      let obj = JSON.parse(JSON.stringify(info));
      let shops = obj.specialUserByShopModelList || [];
      let shopName = shops.map(item => item.shopName).join(',');
      let shopIdList = shops.map(item => item.shopId);
      this.$refs.seleShop.setValue(shops);
      this.info = { ...obj, shopName, shopIdList };
      this.modify = true;
    },
    changeShop(shops) {
      let names = shops.map(item => item.shopName);
      let shopIdList = shops.map(item => item.shopId);
      this.info = { ...this.info, shopName: names.join(','), shopIdList };
    },
    submit() {
      let info = this.info;
      if (this.btnLoading) return ;
      let ifAdmin = this.$store.getters.ifAdmin;
      if (!/^([0-1]?\d|2[0-4])$/.test( info.specialPlaTime )) {
        let endTime = ifAdmin ? '24' : '12'
        return this.$toast(`充电宝每天免费时长只能为0-${ endTime }之间的整数`);
      }
      if (info.specialPlaTime > 12 && !ifAdmin) return this.$toast('免费用户最高可设置12个小时');
  
      this.$axios.post('/api/SpecialUserController/addSpecialUser', info).then(res => {        
        this.$toast(`${ this.modify ? '修改' : '新增' }成功！`);
        this.btnLoading = false;
        if (this.modify) {
          this.$emit('close', res);
        } else {
          this.$router.go(-1);
        }
      }).catch(() => {
        this.btnLoading = false;
      })
    }
  },
  mounted() { 
  }
};
</script>

<style lang="less">
.AddSuper {
}
</style>
